﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2016-2018 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Compare maps</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

  <meta name="description" content="Synchronize OL3 maps." />
  <meta name="keywords" content="ol3, interaction, synchronize, map" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <!-- Font-GIS -->
  <link href="https://viglino.github.io/font-gis/css/font-gis.css" rel="stylesheet" />

  <link rel="stylesheet" href="../style.css" />
  <style>
    .tools {
      text-align: center;
      display: inline-block;
      width: 2.5em;
      height: 500px;
      background: #eee;
    }
    .tools i {
      font-size: 2em;
      cursor: pointer;
      display: inline-block;
    }
    #compare {
      position: relative;
      float: left;
      height: 500px;;
      width: calc(100% - 2.5em);
    }
    .fullscreen .tools {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 6em 0;
      touch-action: none;
    }
    .fullscreen #compare {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      height: auto;
    }
    /* Place map2 over map1 */
    #map,
    #map2 {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
    /* Map 1 */
    #compare.view1 #map2 {
      display: none;
    }
    #compare.view2 #map {
      display: none;
    }
    /* Remove controls on map 1 */
    #compare.swipev #map .ol-control,
    #compare.swipeh #map .ol-control,
    #compare.clip #map .ol-control {
      display: none;
    }
    /* Remove cross on swipe */
    #compare.swipev .ol-target-overlay,
    #compare.swipeh .ol-target-overlay {
      display: none;
    }
    /* Compare 50% */
    .compare #map {
      width: 50%;
    }
    .compare #map2 {
      left: 50%;
      width: 50%;
    }
    /* popup style */
    .ol-popup {
      max-width:300px;
      min-width:100px;
      min-height:1em;
      z-index: 1;
    }
    /* Image on popup */
    .ol-popup img {
      float: left;
      margin: 0 0.5em 0 0;
      max-width: 100px;
      max-height: 100px;
    }
  </style>
  </head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Compare maps</h1>
  </a>
  <p class="info">
    This example use a <i>ol/control/Swipe</i> and a <i>ol/interaction/Clip</i> combine with 
    a <i>ol/interaction/Synchronize</i> to compare 2 maps.
    <br/>
    <button onclick="$('body').addClass('fullscreen'); setMode();">Fullscreen</button>
  </p>

  <!-- DIV for the map -->
  <div id="compare" class="compare">
    <div id="map""></div>
    <div id="map2""></div>
  </div>
  <div class="tools">
    <i class="fg-screen-dub" onclick="setMode('compare')" title="Compare"></i>
    <i class="fg-screen-dub1" onclick="setMode('view1')" title="Map 1"></i>
    <i class="fg-screen-dub2" onclick="setMode('view2')" title="Map 2"></i>
    <i class="fg-screen-split-h" onclick="setMode('swipev')" title="Swipe V"></i>
    <i class="fg-screen-split-v" onclick="setMode('swipeh')" title="Swipe V"></i>
    <i class="fg-screen-mag-alt" onclick="setMode('clip')" title="Clip"></i>
  </div>

  <script type="text/javascript">
  // Layers
  var mapbox = new ol.layer.Tile({
    minResolution: 306,
    source: new ol.source.XYZ({
      url: 'https://{a-d}.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy/{z}/{x}/{y}.png',
      attributions: [ '&copy; <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' ] 
    })
  });
  var stamen = new ol.layer.Tile({
    source: new ol.source.Stamen({ layer: 'watercolor' }) 
  });

  // The map
  var map = new ol.Map ({
    target: 'map',
    view: new ol.View ({
      zoom: 10,
      center: [262600, 6250704]
    }),
    layers: [ new ol.layer.Tile({
      source: new ol.source.Stamen({ layer: 'watercolor' }) 
    })]
  });

  var map2 = new ol.Map ({
    target: 'map2',
    view: new ol.View ({
      zoom: 5,
      center: [166326, 5992663]
    }),
    layers: [ new ol.layer.Tile({
      source: new ol.source.Stamen({ layer: 'toner' }) 
    })]
  });

  function getLayer() {
    return new ol.layer.Vector({
      name: '1914-18',
      source: new ol.source.Vector({
        url: '../data/fond_guerre.geojson',
        projection: 'EPSG:3857',
        format: new ol.format.GeoJSON(),
        attributions: [ '&copy; <a href="https://data.culture.gouv.fr/explore/dataset/fonds-de-la-guerre-14-18-extrait-de-la-base-memoire">data.culture.gouv.fr</a>' ]
      })
    });
  }
  map.addLayer(getLayer());
  map2.addLayer(getLayer());

  // Select interaction
  var select1 = new ol.interaction.Select({ condition: ol.events.condition.click });
  map.addInteraction(select1);
  var select2 = new ol.interaction.Select({ condition: ol.events.condition.click });
  map2.addInteraction(select2);

  var popup1 = new ol.Overlay.Popup({ anim: true, closeBox: true });
  map.addOverlay(popup1);
  var popup2 = new ol.Overlay.Popup({ anim: true, closeBox: true });
  map2.addOverlay(popup2);

  function showPopup(e, popup) {
    var feature = e.element;
    var content = "";
    if (!feature.get('text')) return;
    content += "<img src='"+feature.get("img")+"'/>";
    content += feature.get("text");
    if (/swipe/.test(currentMode)) {
      popup2.show(feature.getGeometry().getFirstCoordinate(), content); 
    } else {
      popup.show(feature.getGeometry().getFirstCoordinate(), content);
    }
  }
  function hidePopup() {
    popup1.hide(); 
    popup2.hide(); 
  }
  select1.getFeatures().on('add', function(e) { showPopup(e, popup1) });
  select2.getFeatures().on('add', function(e) { showPopup(e, popup2) });
  select1.getFeatures().on('remove', hidePopup);
  select2.getFeatures().on('remove', hidePopup);

  // Synchronize the maps 
  map.addInteraction( new ol.interaction.Synchronize({ maps: [map2] }) );
  map2.addInteraction( new ol.interaction.Synchronize({ maps: [map] }) );

  // Tools
  var clip = new ol.interaction.Clip({ radius: 150, layers: map2.getLayers().getArray() });
  var swipe = new ol.control.Swipe({ rightLayers: map2.getLayers().getArray(),  });

  // Change mode
  var currentMode;
  function setMode(mode) {
    if (mode) {
      currentMode = mode;
      // Remove tools
      map2.removeControl(swipe);
      map2.removeInteraction(clip);
      // Set interactions
      switch (mode) {
        case 'swipev':
        case 'swipeh': {
          map2.addControl(swipe);
          swipe.set('orientation', (mode==='swipev' ? 'vertical' : 'horizontal'));
          break;
        }
        case 'clip': {
          map2.addInteraction(clip);
          break;
        }
      }
      // Update position
      document.getElementById("compare").className = mode;
      select1.getFeatures().clear();
      select2.getFeatures().clear();
    }
    map.updateSize();
    map2.updateSize();
    map2.on('click', function(e) {
      if (/swipe/.test(currentMode)) {
        if (ol.extent.containsCoordinate(swipe.getRectangle(), e.pixel)) {
          // Simulate map1 selection
          select2.getFeatures().clear();
          e.stopPropagation();
          map.forEachFeatureAtPixel(e.pixel, function(f, l) {
            if (l) {
              select1.getFeatures().clear();
              select1.getFeatures().push(f)
              return true;
            }
          })
        } else {
          select1.getFeatures().clear();
        }
      }
    });
  }

  </script>
  
</body>
</html>